import React from 'react';
import { Button, Typography, Select } from 'antd';

const { Text } = Typography;
const { Option } = Select;

interface PaginationProps {
    current: number;
    pageSize: number | undefined;
    length: number;
    total: number;
    showCount: () => void;
    onChange: (type: string) => void;
    onShowSizeChange: (pageSize: number) => void;
}

class Pagination extends React.PureComponent<PaginationProps> {
    render() {
        const {
            current,
            pageSize = 10,
            length,
            total,
            showCount,
            onChange,
            onShowSizeChange,
        } = this.props;

        return (
            <Typography className="spaceBetween flexWrap" style={{ marginLeft: '12px' }}>
                <Typography className="marginB8">
                    <Text>订单总数：</Text>
                    <Button
                        type="primary"
                        size="small"
                        className="smallButton"
                        onClick={showCount}
                    >
                        查看
                    </Button>
                    {total !== 0 && <Text style={{ marginLeft: '16px' }}>共<Text strong>{total}</Text>条</Text>}
                    {total === 0 && <Text style={{ marginLeft: '16px' }} type="danger">{'(点击\'查看\'获取总数)'}</Text>}
                </Typography>
                <Typography className="marginB8">
                    <Select value={pageSize} onChange={onShowSizeChange}>
                        <Option value={10}>10条/页</Option>
                        <Option value={20}>20条/页</Option>
                        <Option value={50}>50条/页</Option>
                        <Option value={100}>100条/页</Option>
                    </Select>
                    <Button
                        type="primary"
                        size="small"
                        htmlType="submit"
                        className="smallButton"
                        style={{ marginLeft: '16px' }}
                        disabled={current === 1}
                        onClick={() => onChange('prev')}
                    >
                        上一页
                    </Button>
                    <Button
                        type="primary"
                        size="small"
                        htmlType="submit"
                        className="smallButton"
                        style={{ marginLeft: '16px' }}
                        disabled={length === 0
                            || length < pageSize || (total > 0 && Math.ceil(total / pageSize) === current)}
                        onClick={() => onChange('next')}
                    >
                        下一页
                    </Button>
                </Typography>
            </Typography>
        );
    }
}

export default Pagination;
